<template>
  <div id="app" class="h-screen w-screen overflow-hidden bg-gray-50">
    <div class="h-full w-full flex">
      <!-- 左侧导航栏 -->
      <sidebar
        :active-view="currentView"
        @view-change="handleViewChange"
        @collapse-change="handleSidebarCollapse"
      />

      <!-- 主内容区域 -->
      <div class="flex-1 h-full overflow-hidden">
        <transition name="fade" mode="out-in">
          <keep-alive>
            <component
              :is="currentViewComponent"
              @select-program="handleSelectProgram"
              @debug-program="handleDebugProgram"
            />
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from './components/Sidebar.vue'
import DebuggerView from './views/DebuggerView.vue'
import SettingsView from './views/SettingsView.vue'
import HistoryView from './views/HistoryView.vue'
import DocsView from './views/DocsView.vue'

export default {
  name: 'App',
  components: {
    Sidebar,
    DebuggerView,
    SettingsView,
    HistoryView,
    DocsView
  },
  data() {
    return {
      currentView: 'debugger',
      sidebarCollapsed: false
    }
  },
  computed: {
    currentViewComponent() {
      const views = {
        debugger: 'DebuggerView',
        settings: 'SettingsView',
        history: 'HistoryView',
        docs: 'DocsView'
      }
      return views[this.currentView] || 'DebuggerView'
    }
  },
  methods: {
    handleViewChange(viewId) {
      this.currentView = viewId
    },

    handleSidebarCollapse(collapsed) {
      this.sidebarCollapsed = collapsed
    },

    // 处理从历史记录选择程序
    handleSelectProgram(data) {
      // 切换到调试器视图
      this.currentView = 'debugger'
      // 通过事件总线或其他方式通知 DebuggerView 加载程序（包含断点）
      this.$nextTick(() => {
        // 通过自定义事件通知 DebuggerView
        this.$root.$emit('load-program', data)
      })
    },

    // 处理从历史记录启动调试
    handleDebugProgram(data) {
      // 切换到调试器视图
      this.currentView = 'debugger'
      // 通知 DebuggerView 加载并启动调试（包含断点）
      this.$nextTick(() => {
        this.$root.$emit('debug-program', data)
      })
    }
  }
}
</script>

<style>
/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

/* 可交互元素禁用拖拽 */
button,
input,
select,
textarea,
.el-button,
.el-input,
.menu-item,
.resize-handle,
a {
  -webkit-app-region: no-drag;
}
</style>
